<template>
	<!-- 不良多选 -->
	<u-checkbox-group>
		<view class="w-100% h-32rpx"></view>
		<view class="" v-for="(item, index) in unqualifiedList" :key="index">
			<view class="ml-32rpx mr-32rpx mb-32rpx mt-8rpx causesOfDefectsText1">
				{{ item.firstCode }}:{{ item.firstContent }}
			</view>
			<view class="mr-32rpx ml-32rpx">
				<u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in item.items"
					:key="index" :name="item.id">
					<view class="causesOfDefectsText2" style="min-width: 161rpx;">
						{{ item.secondContent }}
					</view>
				</u-checkbox>
			</view>
		</view>
	</u-checkbox-group>
</template>

<script setup lang="ts">
	import { defineProps, toRefs, ref, toRaw } from 'vue'
	const emit = defineEmits(["unqualifiedSubmissionList"])
	const props = defineProps<{
		unqualifiedList ?: {}[];
	}>()
	const unqualifiedList = toRefs(props).unqualifiedList
	const newList = ref<string[]>([])

	function checkboxChange(e) {
		const oldList = JSON.parse(JSON.stringify(toRaw(unqualifiedList).value));
		let found = false; // 标记是否找到对应项
		for (let i = 0; i < oldList.length; i++) {
			for (let index = 0; index < oldList[i].items.length; index++) {
				if (oldList[i].items[index].id === e.name) {
					let singleOption = {
						firstCode: '',
						firstContent: '',
						secondCode: '',
						id: '',
						secondContent: ''
					}
					singleOption.firstCode = oldList[i].firstCode;
					singleOption.firstContent = oldList[i].firstContent;
					singleOption.secondCode = oldList[i].items[index].secondCode;
					singleOption.id = oldList[i].items[index].id;
					singleOption.secondContent = oldList[i].items[index].secondContent;
					let indexnum;
					for (indexnum = 0; indexnum < newList.value.length; indexnum++) {
						if (singleOption.id === newList.value[indexnum].id) {
							found = true; // 找到了对应项
							break;
						}
					}
					if (found) {
						// 如果找到了对应项，就删除它
						newList.value.splice(indexnum, 1);
					} else {
						// 如果没找到对应项，就添加它
						newList.value.push(singleOption);
					}
					emit('unqualifiedSubmissionList', newList.value)
					return;
				}
			}
		}
	}
</script>

<style scoped>
	.causesOfDefectsText1 {
		font-size: 24rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 500;
		color: #1E1F22;
	}

	.causesOfDefectsText2 {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #4B4D55;
	}

	.u-checkbox {
		margin-bottom: 40rpx;
	}

	::v-deep .u-checkbox__icon-wrap--square {
		border-radius: 2rpx;
		width: 32rpx !important;
		height: 32rpx !important;
	}
</style>